<template>
    <div id="logintwo">
        <div style="display: flex;flex-direction:column ;width: 100%;height: 100%;overflow: hidden;">
            <div class="name">网络仿真系统</div>
            <div class="login-modal">
                <div class="title">登录</div>
                <el-form class="login-form">
                <el-form-item prop="username" style="margin-top: 30px;">
                    <el-input
                        placeholder="请输入用户名"
                        prefix-icon="el-icon-user"
                        v-model="loginForm.username">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password"  style="margin-top: 30px;">
                    <el-input
                        :type="passwordType"
                        placeholder="请输入密码"
                        prefix-icon="el-icon-lock"
                        v-model="loginForm.password"
                        @keydown.enter = handleLogin
                        >
                    </el-input>
                </el-form-item>
                <el-form-item  style="margin-top: 30px;">
                    <el-button type="primary"
                                style="width: 100%;"
                                @click.native.prevent="handleLogin"
                                class="login-submit">
                    登录
                    </el-button>
                </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from '@/router';
import { reactive ,onMounted} from 'vue';
let passwordType = "password";
const loginForm=reactive({
    //用户名
    username: "username",
    //密码
    password: "password",
    rememberPwd: false,
})
function showPassword() {
    passwordType === ""
        ? (passwordType = "password")
        : (passwordType = "");
    }
function handleLogin() {
    if(loginForm.username === 'username' && loginForm.password==='password'){
        router.push({
            path:'/home'
        })
    }else{
        alert('密码或用户名错误')
    }
}
</script>

<style scoped>
#logintwo{
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url("src/assets/universe.jpeg");
background-repeat: no-repeat;
background-position: center center;
overflow: auto;
position: fixed;
line-height: 100%;
}
::-webkit-scrollbar{
width: 7px;
height: 7px;
display: none;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(39, 51, 59, 1.0);

}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
.name{
line-height: 50px;
font-size: 40px;
font-weight: 700;
color: #FFFFFF;
width: 100%;
text-align: center;
position: absolute;
top: 10vh;
}
.login-modal{
position: relative;
width: 420px;
height: auto;
top: 50%;
left: 50%;
padding: 50px 20px;
transform: translate(-50%,-50%);
background-color: #FFFFFF;
border-radius: 5%;
}
.title{
height: 50px;
line-height: 50px;
font-weight: 650;
text-align: center;
font-size: 28px;
}
.login-form{
margin: 20px 40px;
}
</style>  